<script setup lang="ts">
  import { getUserInfoAPI } from '@/api'
  import { PAGE_PATH } from '@/constants'
  import { useTokenStore } from '@/store/token'
  import type { UserData } from '@/types/user'
  import { onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  const store = useTokenStore()

  const logout = () => {
    uni.showModal({
      title: '确认退出吗',
      success(res) {
        if (res.confirm) {
          store.removeToken() // 删除token
          // uni.navigateTo({
          //   url: PAGE_PATH.LOGIN_PAGE,
          // })
          uni.reLaunch({
            url: PAGE_PATH.LOGIN_PAGE,
          })
        }
      },
    })
  }

  const userInfo = ref<UserData>({} as UserData)
  onShow(() => {
    getUserInfo()
  })
  const getUserInfo = async () => {
    userInfo.value = await getUserInfoAPI()
  }
  const toArchive = () => {
    // uni.showToast({ title: '跳转到档案' })
    uni.navigateTo({ url: PAGE_PATH.ARCHIVE_LIST_PAGE })
  }
  const toInquiry = () => {
    uni.navigateTo({
      url: '/subpkg_medical/inquiry/index',
    })
  }
</script>

<template>
  <scroll-view scroll-y>
    <view class="my-page">
      <!-- 用户资料（头像&昵称） -->
      <view class="user-profile">
        <image v-if="!!userInfo.avatar" :src="userInfo.avatar" class="user-avatar" />
        <image v-else class="user-avatar" src="/static/uploads/doctor-avatar.jpg"></image>
        <view class="user-info">
          <text class="nickname">{{ userInfo.account }}</text>
          <text class="iconfont icon-edit"></text>
        </view>
      </view>
      <!-- 用户数据 -->
      <view class="user-data">
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.collectionNumber }}</text>
          <text class="data-label">收藏</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.likeNumber }}</text>
          <text class="data-label">关注</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.score }}</text>
          <text class="data-label">积分</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.couponNumber }}</text>
          <text class="data-label">优惠券</text>
        </navigator>
      </view>
      <!-- 问诊医生 -->
      <custom-section :custom-style="{ paddingBottom: '20rpx' }" title="问诊中">
        <swiper
          class="uni-swiper"
          indicator-active-color="#2CB5A5"
          indicator-color="#EAF8F6"
          indicator-dots
        >
          <swiper-item>
            <view class="doctor-brief">
              <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
              <view class="doctor-info">
                <view class="meta">
                  <text class="name">王医生</text>
                  <text class="title">内分泌科 | 主任医师</text>
                </view>
                <view class="meta">
                  <text class="tag">三甲</text>
                  <text class="hospital">积水潭医院</text>
                </view>
              </view>
              <navigator class="doctor-contcat" hover-class="none" url=" "> 进入咨询 </navigator>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="doctor-brief">
              <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
              <view class="doctor-info">
                <view class="meta">
                  <text class="name">王医生</text>
                  <text class="title">内分泌科 | 主任医师</text>
                </view>
                <view class="meta">
                  <text class="tag">三甲</text>
                  <text class="hospital">积水潭医院</text>
                </view>
              </view>
              <navigator class="doctor-contcat" hover-class="none" url=" "> 进入咨询 </navigator>
            </view>
          </swiper-item>
        </swiper>
      </custom-section>
      <!-- 药品订单 -->
      <custom-section show-arrow title="药品订单">
        <template #right>
          <navigator hover-class="none" url="/subpkg_medicine/order_list/index">
            全部订单
          </navigator>
        </template>
        <view class="drug-order">
          <navigator hover-class="none" url="/subpkg_medicine/order_list/index?type=1">
            <uni-badge
              :text="userInfo.orderInfo.paidNumber ? userInfo.orderInfo.paidNumber.toString() : ''"
              :offset="[3, 3]"
              absolute="rightTop"
            >
              <image src="/static/images/order-status-1.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待付款</text>
          </navigator>
          <navigator hover-class="none" url="/subpkg_medicine/order_list/index?type=2">
            <uni-badge
              :text="
                userInfo.orderInfo.finishedNumber
                  ? userInfo.orderInfo.receivedNumber.toString()
                  : ''
              "
              :offset="[3, 3]"
              absolute="rightTop"
            >
              <image src="/static/images/order-status-2.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待发货</text>
          </navigator>
          <navigator hover-class="none" url="/subpkg_medicine/order_list/index?type=3">
            <uni-badge
              :text="
                userInfo.orderInfo.shippedNumber ? userInfo.orderInfo.shippedNumber.toString() : ''
              "
              :offset="[3, 3]"
              absolute="rightTop"
            >
              <image src="/static/images/order-status-3.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待收货</text>
          </navigator>
          <navigator hover-class="none" url="/subpkg_medicine/order_list/index?type=4">
            <uni-badge
              :text="
                userInfo.orderInfo.finishedNumber
                  ? userInfo.orderInfo.finishedNumber.toString()
                  : ''
              "
              :offset="[3, 3]"
              absolute="rightTop"
            >
              <image src="/static/images/order-status-4.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">已完成</text>
          </navigator>
        </view>
      </custom-section>
      <!-- 快捷工具 -->
      <custom-section title="快捷工具">
        <uni-list :border="false">
          <uni-list-item
            :border="false"
            title="我的问诊"
            @click="toInquiry"
            show-arrow
            clickable
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-01',
            }"
          />
          <uni-list-item
            :border="false"
            title="我的处方"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-02',
            }"
          />
          <uni-list-item
            :border="false"
            title="家庭档案"
            @click="toArchive"
            show-arrow
            clickable
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-03',
            }"
          />
          <uni-list-item
            :border="false"
            title="地址管理"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-04',
            }"
          />
          <uni-list-item
            :border="false"
            title="我的评价"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-05',
            }"
          />
          <uni-list-item
            :border="false"
            title="官方客服"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-06',
            }"
          />
          <uni-list-item
            :border="false"
            title="设置"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-07',
            }"
          />
        </uni-list>
      </custom-section>
      <!-- 退出登录 -->
      <view class="logout-button" @click="logout">退出登录</view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
